<template>
  <div class="box">
    儿子的文具： {{ toy }}
    <div style="margin: 10px 0;">
      inject的名字： {{ fullName }}
    </div>
    <div>
      inject的车辆信息： {{ carInfo }}
    </div>
  </div>

</template>

<script lang='ts' setup>
import { inject, ref } from 'vue';

const toy = ref("奥特曼")

// inject注入
const fullName = inject('fullName', "默认值李四")
const carInfo = inject('carInfo', { name: '' })

</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
  min-height: 120px;
}
</style>
